import Vue from "vue";
import VueDraggableResizable from "vue-draggable-resizable";

Vue.component("vue-draggable-resizable", VueDraggableResizable);
function initDrag(columns) {
    const draggingMap = {};
    columns.forEach((col) => {
        draggingMap[col.dataIndex || col.key] = col.width;
    });

    const draggingState = Vue.observable(draggingMap);
    return (h, props, children) => {
        let thDom = null;

        const { key, ...restProps } = props;
        let col;

        if (key === "selection-column") {
            //表格加了复选框，不加这个判断col会是undefided
            col = {};
        } else {
            col = columns.find((col) => {
                const k = col.dataIndex || col.key;
                return k === key;
            });
        }
        if (!col || !col.width) {
            return <th {...restProps}>{children}</th>;
        }
        const onDrag = (x) => {
            draggingState[key] = 0;
            let max = 60
            col.width = Math.max(x, max);
            col.drag = true
            setTimeout(function(){
                col.drag = false
            },100)
        };

        const onDragstop = () => {
            draggingState[key] = thDom.getBoundingClientRect().width;
        };
        return (
            <th
                {...restProps}
                v-ant-ref={(r) => (thDom = r)}
                width={col.width}
                class="resize-table-th"
            >
                {children}
                <vue-draggable-resizable
                    key={col.key}
                    class="table-draggable-handle"
                    w={10}
                    x={draggingState[key] || col.width}
                    z={1}
                    axis="x"
                    draggable={true}
                    resizable={true}
                    onDragging={onDrag}
                    onDragstop={onDragstop}
                ></vue-draggable-resizable>
            </th>
        );
    };
}
export default {
    data: function(){
        return {
            tableWidth: 2000,
            tableHeight:"calc(100vh - 220px)",
            isZeroList: false
        }
    },
    created() {
        let width = 0
        this.columns.forEach((v, k) => {
            width += v.width
        })
        this.tableWidth = width+10
        this.$on("loadDataCallback",function(res){

          // if(res.result.records instanceof Array && res.result.records.length == 0){
          //   this.isZeroList = true;
          //   if(this.tableHeight == "calc(100vh - 220px)"){
          //     this.tableHeight = "calc(100vh - 363px)"
          //   }else{
          //     this.tableHeight = parseInt(this.tableHeight) - 143 + "px"
          //   }
          // }else{
          //   if(this.isZeroList){
          //     if(this.tableHeight == "calc(100vh - 363px)"){
          //       this.tableHeight = "calc(100vh - 220px)"
          //     }else{
          //       this.tableHeight = parseInt(this.tableHeight) + 143 + "px"
          //     }
          //   }
          //   this.isZeroList = false
          // }
        })
    },
    methods: {
        drag(columns) {
            return {
                header: {
                    cell: initDrag(columns),
                },
            };
        },
    },
};